<template>
 <div class="rating_page">
      <head-top head-title="推荐有奖" :go-back=true></head-top>
   <section class="activity_banner">
     <img src="../../../images/activity.png">
   </section>
   <section class="invite_firend">
     <div class="invite_firend_style">
       <img src="../../../images/weixin.png" @click="fenxiang">
       <p>邀请微信好友</p>
     </div>
     <div class="invite_firend_style">
       <img src="../../../images/qq.png" @click="fenxiang">
       <p>邀请QQ好友</p>
     </div>
     <div class="invite_firend_style">
       <img src="../../../images/fenxiang.png" @click="fenxiang">
       <p>面对面邀请</p>
     </div>
   </section>
   <section class="invite_num">
     <div class="invite_num_style">
       <p>累计收益</p>
       <p><span>0</span>元</p>
     </div>
     <div class="invite_num_style invite_people">
       <p>成功邀请</p>
       <p><span>0</span>人</p>
     </div>
   </section>
   <p class="income_detail">-收益明细-</p>
 </div>
</template>

<script type="text/ecmascript-6">
import headTop from 'components/header/head'
  export default {
  data(){
     return{}
   },
   created(){
   },
   mounted(){
   },
   computed: {
   },
   methods: {
     fenxiang(){
       this.$dialog.alert({mes:'分享测试'})
     }
   },
   components:{
    headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../../style/mixin';
.activity_banner{
  img{
    @include wh(100%, 10rem);
  }
}
.invite_firend{
  display: flex;
  padding: 1rem 0;
  background-color: #fff;
  .invite_firend_style{
    flex: 1;
    text-align: center;
    img{
      display: inline-block;
      @include wh(2.5rem, 2.5rem);
    }
    p{
      @include sc(.5rem, #333);
    }
  }
}
.invite_num{
  display: flex;
  margin-top: 1rem;
  @include sc(.5rem, #666);
  .invite_num_style{
    flex: 1;
    text-align: center;
    p{
      color: #666;
    }
    span{
      @include sc(.8rem, #ff5633);
      font-weight: bold;
    }
  }
  .invite_people{
    border-left: 0.025rem solid #ddd;
    span{
      @include sc(.8rem, #666);
      font-weight: bold;
    }
  }
}
.income_detail{
  text-align: center;
  margin-top: 1rem;
  @include sc(.5rem, #666);
}
.incom_tips{
  text-align: center;
  margin-top: 1rem;
  img{
    @include wh(1.3rem, 1.6rem);
  }
  p{
    @include sc(.5rem, #999);
  }
}
</style>
